<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>吴思里的个人简历</title>
  <link rel="stylesheet" href="./index.css">
  <script src="//at.alicdn.com/t/font_2367035_rmi4nxz12a.js"></script>
  <style type="text/css">
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <nav class="clearfix">
    <a href="#" class="logo">
      <span class="rs">RS</span><span>card</span>
    </a>
    <ul class="clearfix">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">简历</a></li>
      <li><a href="#">项目</a></li>
      <li><a href="#">其他</a></li>
    </ul>
  </nav>
  <div class="banner" style="background-image: url(../../img/index/rs-cover-2-2-1-1.jpg);">
    <div class="mask"></div>
  </div>
  <main>
    <div class="userCard">
      <div class="pictureAndText clearfix">
        <div class="picture">
          <img src="../../img/index/card-avartor.jpg" alt="头像">
        </div>
        <div class="text">
          <span class="welcome">
            Hello
            <span class="triangle"></span>
          </span>
          <h1>吴思里</h1>
          <p>初级前端</p>
          <hr>
          <dl>
            <dt>年龄</dt>
            <dd>21</dd>
            <dt>所在城市</dt>
            <dd>重庆</dd>
            <dt>邮箱</dt>
            <dd>498282023@qq.com</dd>
            <dt>手机</dt>
            <dd>17687541524</dd>
          </dl>
        </div>
      </div>
      <footer class="media">
        <a href="#">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
        <a href="#">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weibo"></use>
          </svg>
        </a>
        <a href="#">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-twitter-fill"></use>
          </svg>
        </a>
        <a href="#">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jianshu"></use>
          </svg>
        </a>
      </footer>
    </div>
    <p class="downloadResume_container">
      <a class="downloadResume" href="./resume.pdf" target="_blank" download="">下载 PDF 简历</a>
    </p>
    <p class="selfIntrodution">
      吴思里，初级前端工程师，现在在腾讯PCG应用架构部门
      <br>技能：前端开发，小程序开发，nodejs开发
    </p>
  </main>
  <section class="skill">
    <h2>技能</h2>
    <ol class="clearfix">
      <li>
        <h3>HTML5 & CSS3</h3>
        <div class="progressBar">
          <div class="progress" style="width: 44%;"></div>
        </div>
      </li>
      <li>
        <h3>jQuery</h3>
        <div class="progressBar">
          <div class="progress" style="width: 40%;"></div>
        </div>
      </li>
      <li>
        <h3>Vue.js</h3>
        <div class="progressBar">
          <div class="progress" style="width: 45%;"></div>
        </div>
      </li>
      <li>
        <h3>React.js</h3>
        <div class="progressBar">
          <div class="progress" style="width: 43%;"></div>
        </div>
      </li>

      <li>
        <h3>HTTP</h3>
        <div class="progressBar">
          <div class="progress" style="width: 40%;"></div>
        </div>
      </li>
      <li>
        <h3>Node.js</h3>
        <div class="progressBar">
          <div class="progress" style="width: 45%;"></div>
        </div>
      </li>

    </ol>
  </section>
  <section class="porfolio">
    <h2>作品集</h2>
    <nav>
      <ol class="clearfix">
        <li id="portfolioAll">所有</li>
        <li id="portfolioFramework">框架</li>
        <li id="portfolioVallina">原生JS&CSS</li>
      </ol>
      <div id="portfolioBar" class="bar state-1">
        <div class="bar-inner"></div>
      </div>
    </nav>

    <script>
      portfolioAll.onclick=function(){
        portfolioBar.className="bar state-1"
      }
      portfolioFramework.onclick=function(){
        portfolioBar.className="bar state-2"
      }
      portfolioVallina.onclick=function(){
        portfolioBar.className="bar state-3"
      }
    </script>

    <div class="works" style="height: 576px;">
      <div class="big" style="top: 0;left: 0;">
        <img src="../../../img/index/1.jpg" alt="作品1">
      </div>
      <div class="small" style="top: 0;left: 645px;">
        <img src="../../../img/index/2.jpg" alt="作品2">
      </div>
      <div class="small" style="top: 294px;left: 645px;">
        <img src="../../../img/index/3.jpg" alt="作品3">
      </div>
    </div>

  </section>
</body>

</html>